<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-tabs v-model="active">
      <van-tab title="可用优惠卡">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell-group>
            <van-cell
              v-for="item in cards"
              :key="item.id"
              :title="item.r_card_name"
              :value="item.r_card_amount + ' 元 | ' + item.r_count + ' 张'"
              :label="item.retailer_name"
              is-link
              :to="{
                name: 'ClientCardDetail',
                params: { retailer_id: item.retailer, card_id: item.id },
              }"
            >
              <!-- <template #title>
            <span>{{ item.score }}</span>
            <span v-if="item.unused_score != 0">
              +
              <van-tag type="warning">{{ item.unused_score }}</van-tag></span
            >
          </template> -->
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
      <van-tab title="待激活优惠卡">
        <van-list
          v-model="unused_loading"
          :finished="unused_finished"
          finished-text="没有更多了"
          @load="onUnusedLoad"
        >
          <van-cell-group>
            <van-cell
              v-for="item in unused_cards"
              :key="item.id"
              :title="item.r_card_name"
              :value="
                item.r_card_amount + ' 元 | ' + item.r_unused_count + ' 张'
              "
              :label="item.retailer_name"
            >
              <!-- <template #title>
            <span>{{ item.score }}</span>
            <span v-if="item.unused_score != 0">
              +
              <van-tag type="warning">{{ item.unused_score }}</van-tag></span
            >
          </template> -->
            </van-cell>
          </van-cell-group>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxUserGiftCards } from "@/api/card";

export default {
  name: "ClientCards",
  components: {
    NavBar,
  },
  // computed: {
  //   ...mapGetters(["retailer_name"]),
  // },
  data() {
    return {
      title: this.$route.meta.title,
      active: 0,
      cards: [],
      unused_cards: [],
      loading: false,
      finished: false,

      unused_loading: false,
      unused_finished: false,

      listQuery: {
        page: 1,
        page_size: 10,
        openid: localStorage.getItem("openid"),
        flag: 1,
      },

      unusedListQuery: {
        page: 1,
        page_size: 10,
        openid: localStorage.getItem("openid"),
        flag: 0,
      },
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      this.getCardsByOpenid();
    },

    onUnusedLoad() {
      this.getUnusedCardsByOpenid()
    },

    getCardsByOpenid() {
      this.loading = true;
      getWxUserGiftCards(this.listQuery)
        .then((res) => {
          console.log(res);
          if (res.data.results.length === 0) {
            this.cards = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.cards.push(...res.data.results);
          this.loading = false;

          if (this.cards.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },

    getUnusedCardsByOpenid() {
      this.unused_loading = true;
      getWxUserGiftCards(this.unusedListQuery)
        .then((res) => {
          console.log(res);
          if (res.data.results.length === 0) {
            this.unused_cards = []; // 清空数组
            this.unused_finished = true; // 停止加载
          }
          this.unusedListQuery.page = res.data.page;
          this.unused_cards.push(...res.data.results);
          this.unused_loading = false;

          if (this.unused_cards.length >= res.data.count) {
            this.unused_finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.unused_loading = false;
          this.unused_finished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>